<template>
    <el-select
        ref="scrollbarRef"
        v-model="selectId"
        filterable 
        :placeholder="placeholder" 
        :clearable="clearable" 
        remote
        reserve-keyword
        remote-show-suffix
        :remote-method="remoteMethod"
        popper-class="scroll_select" 
        @change="handleChange"
        @popup-scroll="scrollChange"
    >
        <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id" />
        <!-- <el-option v-for="item in selectList" v-else :key="item.value" :label="item.label" :value="item.value" /> -->
        <div class="w-[100%] text-[var(--text-color2)] flex-c" v-if="loading"><el-icon class="ml-[-20px]"><Loading /></el-icon> &nbsp; 加载中</div>
        <div class="w-[100%] text-[var(--text-color2)] flex-c" v-else>没有更多了</div>
   </el-select>
</template>
<script setup>
import { Loading } from '@element-plus/icons-vue'
import { ref, reactive, watch, onMounted } from "vue"
const selectId = ref(null)
const loading = ref(false)
const props = defineProps({
    placeholder: {
        type: String,
        default: '请选择'
    },
    selectList: {
        type: Array, //选项列表
        default: () => []
    },
    selectVal: {
        type: String || Array, //选项列表
        default: ''
    },
    clearable: {
        type: Boolean,
        default: false
    },
    dataType: {
        type: Number,
        default: 0
    },
    isMore: {
        type: Boolean,
        default: true
    }
});
const $emit = defineEmits(['change', 'loadMore', 'search']);
const handleChange = (val) => {
    $emit('change', val);
}
watch(() => props.selectVal, (val) => {
    selectId.value = val
})
watch(() => props.selectList, (val, oldVal) => {
    if (val.length !== oldVal.length) {
        loading.value = false
    }
})
watch(() => props.isMore, (val) => {
    if (!val) {
        loading.value = false
    }
})
onMounted(() => {
    selectId.value = props.selectVal
    const scrollContainer = scrollbarRef.value?.$el?.querySelector('.el-scrollbar__wrap')
    if (scrollContainer) {
        scrollContainer.addEventListener('scroll', handleScroll)
    }
})
const scrollbarRef = ref()
const scrollChange = ({ scrollTop }) => {
    const scrollContainer = document.querySelector('.scroll_select .el-scrollbar__wrap')
    if (scrollContainer) {
        const { scrollHeight, clientHeight } = scrollContainer
        if (scrollTop + clientHeight >= scrollHeight) {
            loading.value = true
            setTimeout(() => {
                $emit('loadMore', true)
            }, 600)
        }
    }
}
const remoteMethod = (query) => {
    $emit('search', query)
}
</script>
<!-- <style lang="scss" scoped>
    /* 控制搜索结果box的背景颜色 */
    ::v-deep .el-select__wrapper {
        background-color: var(--bg-color3) !important;
        box-shadow: none !important;
    }
    .el-select-dropdown__item {
        color: var(--text-color2) !important;
    }
    
    .el-select-dropdown__item:hover {
        background-color: var(--hover-bg-color) !important;
    }
    ::v-deep .el-select__placeholder {
        color: var(--text-color1);
    }
    ::v-deep .is-transparent {
        color: var(--el-text-color-regular) ;
    }
</style>
<style>
    .scroll_select {
        background-color: var(--bg-color2) !important;
        box-shadow: none !important;
    }
</style> -->